<template>
  <div
    v-if="isMakeForm"
    :class="['xue-mf-item', { 'xue-mf-item__active': data.makeStyle.active }]"
  >
    <div class="xue-mf-item--mask" v-if="showMask"></div>
    <div class="xue-mf-item--op" v-show="data.makeStyle.active">
      <span class="xue-mf-item--op--copy" @click="copy"
        ><i class="el-icon-document-copy"></i
      ></span>
      <span class="xue-mf-item--op--delete" @click="del"
        ><i class="el-icon-delete"></i
      ></span>
    </div>
    <el-form-item
      :label="
        formData.formStyle.hideLabel || data.style.hideLabel ? '' : data.label
      "
      :label-width="
        formData.formStyle.hideLabel || data.style.hideLabel ? '0' : ''
      "
      :class="{ required: required && formData.formStyle.showRequiredAsterisk }"
    >
      <slot></slot>
    </el-form-item>
  </div>
  <el-form-item
    v-else
    :label="
      formData.formStyle.hideLabel || data.style.hideLabel ? '' : data.label
    "
    :label-width="
      formData.formStyle.hideLabel || data.style.hideLabel ? '0' : ''
    "
    :prop="prop"
    :class="{ required: required && formData.formStyle.showRequiredAsterisk }"
  >
    <slot></slot>
  </el-form-item>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'ItemBox',
  inject: ['formData'],
  props: {
    data: {
      type: Object,
      required: true,
    },
    isMakeForm: {
      type: Boolean,
      default: true,
    },
    prop: String,
    showMask: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    required() {
      return (
        Reflect.has(this.data, 'rules') &&
        Reflect.has(this.data.rules, 'required')
      )
    },
  },
  methods: {
    copy() {
      const data = _.cloneDeep(this.data)
      data.fieldId = `${data.name}_${new Date().getTime()}`
      const i = this.formData.formDataList.findIndex((li) => li === this.data)
      if (i > -1) this.formData.formDataList.splice(i, 0, data)
      else {
        const allColList = this.formData.formDataList.filter(
          (li) => li.name === 'Layout'
        )
        for (let x = 0; x < allColList.length; x++) {
          const j = allColList[x].setting.colList.findIndex(
            (c) => c === this.data
          )
          if (j > -1) allColList[x].setting.colList.splice(j, 0, data)
        }
      }
      // this.formData.model[data.fieldId] = data.value;
      // this.$set(this.formData.model, data.fieldId, data.value);
    },

    // 需要同时删除对应的model中的字段，后期优化
    del() {
      console.log(this.data, this.formData.model)
      if (this.formData.model[this.data.fieldId]) {
        delete this.formData.model[this.data.fieldId]
      }
      const i = this.formData.formDataList.findIndex((li) => li === this.data)
      if (i > -1) this.formData.formDataList.splice(i, 1)
      else {
        const allColList = this.formData.formDataList.filter(
          (li) => li.name === 'Layout'
        )
        for (let x = 0; x < allColList.length; x++) {
          const j = allColList[x].setting.colList.findIndex(
            (c) => c === this.data
          )
          if (j > -1) allColList[x].setting.colList.splice(j, 1)
        }
      }
    },
  },
}
</script>
